<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <input type="text" v-model="num1"> +
        <input type="text" v-model="num2"> =
        <span>{{sum}}</span>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: 0,
                num2: 0
            },

            //methods中放的一般都是功能性的代码：
            //1. 事件的处理函数
            //2. 发送ajax请求的方法封装
            //3. 复杂的业务逻辑
            //methods是可以传参的！
            methods: {
                hanshu() {
                    console.log("sum被调用了")
                    return +this.num1 + +this.num2;
                }
            },

            //计算属性是有缓存的，如果计算过一次了，vue会将这次结果进行缓存
            //当数据未发生任何变化的时候，如果再次调用sum，就直接从缓存中取出结果使用，而不是再调一次

            
            //computed属性用作给页面提供数据
            //computed属性不可以传参
            computed: {
                sum() {
                    console.log("计算属性sum被调用了")
                    return +this.num1 + +this.num2;
                }
            }
        })
    </script>
</body>

</html>